<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

</head>
<body>

<div id="app">

    <div style="text-align: center"><h2>登录页面</h2>
        <el-link href="/index" type="primary" :underline="false"><h3>首页</h3></el-link>

        <el-form v-loading="loading" :model="user" ref="user" label-width="100px"  class="demo-dynamic">
            <el-form-item
                    prop="username"
                    label="用户名"
                    :rules="[
      { required: true, message: '请输入用户名', trigger: 'blur' },

    ]"
            >
                <el-input v-model="user.username"></el-input>
            </el-form-item>

            <el-form-item
                    prop="password"
                    label="密码"
                    :rules="[
      { required: true, message: '请输入密码', trigger: 'blur' },

    ]"
            >
                <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-checkbox v-model="user.checked">记住密码</el-checkbox>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('user')">提交</el-button>
                <el-button @click="resetForm('user')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script th:src="@{/vue.js}"></script>
<script th:src="@{/axios.min.js}"></script>


<!-- 引入样式 -->
<link rel="stylesheet" th:href="@{/element-ui.css}">
<!-- 引入组件库 -->
<script th:src="@{/element-ui.js}"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {},
            loading: false
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading=true
                        axios.post("/user/doLogin", this.user).then(resp => {
                            if (resp.data.flag) {
                                localStorage.setItem("loginName", resp.data.data)
                                this.loading=false
                                setTimeout(
                                    function () {
                                        window.location.href = "/index"
                                    }, 1000
                                )

                                this.$message({
                                    message: resp.data.message,
                                    type: 'success'
                                });
                            } else {
                                this.loading=false
                                this.$message.error(resp.data.message);
                            }
                        })

                    } else {
                        return false;
                    }
                });
            },
        }
    })
</script>
</body>
</html>